<template>
	<div class="all">
	 <div class="wrap">
	 	<div class="home_search">
            <i class="search el-icon-search"></i>
            <el-input ></el-input>
        </div>
		<el-tabs v-model="activeName">
		    <el-tab-pane label="推荐" name="first">
		    <!-- banner-start -->
				<div class="block">
				    <el-carousel>
				      <el-carousel-item >
				      	<img src="../../assets/images/74.gif" alt="">
				      </el-carousel-item>
				      <el-carousel-item >
				      	<img src="../../assets/images/74.gif" alt="">
				      </el-carousel-item>
				      <el-carousel-item >
				      	<img src="../../assets/images/74.gif" alt="">
				      </el-carousel-item>
				    </el-carousel>

				  </div>
			<!-- banner-end -->
			<!-- top_start -->
				<div class="move_hot">
		    			<span>话题推荐</span>
						<router-link :to="{path:'/topic'}"><i>更多&gt;</i></router-link>
						<div class="clear"></div>
				</div>
			<!-- top_end -->
			<!-- module_start -->
			<div class="move">
			    <img src="../../assets/images/firstpage.jpg" alt="">
			    	<div class="font">
						<h3>神偷奶爸3</h3>
						<div class="details">是由环球影业及照明娱乐公司联合制作的3D动画电影，由凯尔·巴尔达、皮
						</div>
			    	</div>
			    <div class="clear"></div>
			</div>
			<div class="kong"></div>
			<!-- module_end -->
			<!-- top_start -->
			<div class="move_hot">
		    	<span>最新单曲</span><i>更多&gt;</i>
				<div class="clear"></div>
			</div>
			<!-- top_end -->
			<div class="img">
				<img src="../../assets/images/71.gif" alt="">
				<img src="../../assets/images/72.gif" alt="">
				<img src="../../assets/images/73.gif" alt="">
			</div>

		    </el-tab-pane>
		    <el-tab-pane label="圈子达人" name="second">
		    <div class="all">
		    <!-- banner-start -->
		    	<div class="block">
				    <el-carousel>
				      <el-carousel-item >
				      	<img src="../../assets/images/68.gif" alt="">
				      </el-carousel-item>
				      <el-carousel-item >
				      	<img src="../../assets/images/68.gif" alt="">
				      </el-carousel-item>
				      <el-carousel-item >
				      	<img src="../../assets/images/68.gif" alt="">
				      </el-carousel-item>
				    </el-carousel>
				</div>
				<!-- banner-end -->
				  <div class="move_hot">
		    			<span>达人话题</span><i>更多&gt;</i>
						<div class="clear"></div>
			      </div>
				  
				  <div class="second_font">
			    		<h3>你真的合适做一名UI设计师吗？</h3>
			    		<div class="font_son">
			    		<span>设计圈</span><span>2016-5-28</span><span>评论：2343</span>
							<div class="details">是由环球影业及照明娱乐公司联合制作的3D动画电影，由凯尔·巴尔达、皮
							</div>
			    		</div>
			    		<div class="clear"></div>
			      </div>
			    		<div class="kong"></div>
			</div>
				  
		    </el-tab-pane>
		    <el-tab-pane label="论逗精选" name="third">
		    	<div class="content"> 
		    		<div class="move_hot">
		    			<span>电影热评</span><i>更多&gt;</i>
						<div class="clear"></div>
			    	</div>
			    	<div class="move">
			    		<img src="../../assets/images/firstpage.jpg" alt="">
			    		<div class="font">
							<h3>神偷奶爸3</h3>
							<div class="details">是由环球影业及照明娱乐公司联合制作的3D动画电影，由凯尔·巴尔达、皮
							</div>
							<div class="people">232434人参与讨论</div>
			    		</div>
			    		<div class="clear"></div>
			    	</div>
			    	<div class="kong"></div>
			    	<div class="move">
			    		<img src="../../assets/images/firstpage.jpg" alt="">
			    		<div class="font">
							<h3>神偷奶爸3</h3>
							<div class="details">是由环球影业及照明娱乐公司联合制作的3D动画电影，由凯尔·巴尔达、皮
							</div>
							<div class="people">232434人参与讨论</div>
			    		</div>
			    		<div class="clear"></div>
			    	</div>
			    	<div class="kong"></div>
			    	<div class="move_hot">
		    			<span>电影热评</span><i>更多&gt;</i>
						<div class="clear"></div>
			    	</div>
			    	<div class="move">
			    		<img src="../../assets/images/firstpage.jpg" alt="">
			    		<div class="font">
							<h3>神偷奶爸3</h3>
							<div class="details">是由环球影业及照明娱乐公司联合制作的3D动画电影，由凯尔·巴尔达、皮
							</div>
							<div class="people">232434人参与讨论</div>
			    		</div>
			    		<div class="clear"></div>
			    	</div>
		    	</div>

		    </el-tab-pane>
		    <el-tab-pane label="今日槽点" name="fourth">
		    	<!-- top_start -->
				<div class="move_hot">
		    			<span>逗趣放槽点</span><i>更多&gt;</i>
						<div class="clear"></div>
				</div>
			<!-- top_end -->
			<!-- interest_start -->
			<div class="interest">
				<h3>希特勒自传《我的奋斗》今日本教材，日本网友：政府传疯了</h3>
				<div class="pic_font">
					<img src="../../assets/images/94.png" alt="">
					<span>参与评论：2343</span><span>参与转发：2341</span>
				    <div class="clear"></div>
				</div>	
			</div>
			<!-- interest_end -->
			<div class="kong"></div>
			<!-- interest_start -->
			<div class="interest">
				<h3>希特勒自传《我的奋斗》今日本教材，日本网友：政府传疯了</h3>
				<div class="pic_font">
					<img src="../../assets/images/94.png" alt="">
					<span>参与评论：2343</span><span>参与转发：2341</span>
				    <div class="clear"></div>
				</div>	
			</div>
			<!-- interest_end -->
		    </el-tab-pane>
		  </el-tabs>
		  <Homenav></Homenav>
	 </div>
	</div>
</template>
<script>
	import Homenav from '@/components/homenav'
	 export default {
        name:"home",
        data(){
            return{
            	activeName: 'first'
            }
        },
		components:{
			Homenav
		}
    }
</script>
<style scoped lang="less">
@rem:35rem;
.home_search{
    height:40/@rem;
    background:#5582c3;
    position:relative;
    .search{
        position:absolute;
        right:50/@rem;
        z-index:10;
        top:50%;
        color:#5582c3;
        font-size:16/@rem;
        transform:translateY(-50%);
    }
}
.all{
	background: #f0f0f0;

}
.second_font{
	background: #fff;

}
.second_font h3{
	font-size: 20/35rem;
	font-weight: bolder;
	padding:20/35rem;
}
.second_font .details{
	padding: 20/35rem 0 50/35rem 20/35rem;
}
.second_font span{
	color: #cecece;
	padding:0 30/35rem 25/35rem 20/35rem;
	
}

.move_hot{
	margin: 10/35rem;
	padding: 0 5/35rem;
	border-left:3px solid #5ebaff;
	color: #5ebaff;
}
.move_hot span{
	float:left;

}
.move_hot i{
	float:right;
}
.clear{
	clear:both;
}
.move{
	padding: 15/35rem 20/35rem;
	background: #fff;
}
.move img{
	width: 75/35rem;
	height: 100/35rem;
	float: left;
	margin-top:5/35rem; 
}
.move .font{
	padding-left: 15/35rem;
	float: left;
	width: 60%;
}
.move .details{
	color: #cecece;
	padding:15/35rem 0;
}
.people{
	color: #cecece;

}
.kong{
	width: 100%;
	height: 5/35rem;
}
.img{
	text-align: center;


}
.img img{
	width: 100/35rem;
	height: 75/35rem;
}
.interest{
	padding: 15/35rem 20/35rem;
	background: #fff;
}
.pic_font{
	padding: 15/35rem 0 15/35rem 0;

}
.pic_font span{
	padding-top:10/35rem;
	padding-left:10/35rem;
   float: left;
   color: #bababa;

}
.pic_font img{
   width:100/35rem;
   height: 100/35rem;
   float: left;
}	
.interest h3{
	font-size: 20/35rem;
	font-weight: bolder;
	

}

</style>
